<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cookies</title>
</head>
<body>


    User:<input id="user" type="text"><br/>
    Pwd:<input id="pwd" type="password"><br/>
    <input id="btn" type="button" value="Login">

    <script>
        {
            let btn = document.getElementById('btn');
            let user = document.getElementById('user');
            let pwd = document.getElementById('pwd');
            btn.onclick = function () {
                console.log(user.value);
                document.cookie = 'username=' + user.value;
                console.log(document.cookie);
                user.value = '';
                pwd.value = '';
            }

            document.cookie="username=John Doe";
        }
    </script>


    
</body>
</html>